<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/9/26
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
    <style>
        #head{
            position: relative;
            top: -35px;
        }
        .table-row{

        }
    </style>
</head>
<body>

<div id="app">
    <!--    表头-->
    <el-form :inline="true" :model="branchSearchForm" class="demo-form-inline">

        <el-form-item label="">
            <el-select v-model="branchSearchForm.branchid" placeholder="部门">
                <el-option  label="请选择你的店铺"  value=""></el-option>
                <el-option v-for="d in branchSearch" :label="d.branchname" :value="d.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="branchup">查询</el-button>
        </el-form-item>
    </el-form>
    <br>
<%--   主表头部按钮 --%>
    <div id="head">
    <el-button type="success" @click="newAdd">新增入库</el-button>
    <el-button type="success" @click="addGoods">添加商品</el-button>
    <el-button type="success" @click="newGoods">刷新</el-button>
    </div>
<%-- 主体表格--%>
<el-table
        stripe
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 90%;font-size: 3px"
        :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'15px'}"
        :cell-style="tableCellStyle"
        :header-cell-style="{ background: '#f4f6f8', color: '#000000' }"
        @selection-change="handleSelectionChange">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
    <el-table-column
            prop="id"
            label="入库编号"
            width="120"
    >
    </el-table-column>
    <el-table-column
            prop="date"
            label="入库时间"
            width="220">
    </el-table-column>
    <el-table-column
            prop="status"
            label="审核状态"
            width="180">
        <template slot-scope="scope">
            <el-tag
                type="success"
                v-if="scope.row.status==1"
                effect="dark">
                申请通过
            </el-tag>
            <el-tag
                    type="warning"
                    v-if="scope.row.status==2"
                    effect="dark">
                审核中
            </el-tag>
            <el-tag
                    type="danger"
                    v-if="scope.row.status==3"
                    effect="dark">
                申请驳回
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column
            prop="staff.staffname"
            label="操作员"
            width="180">
    </el-table-column>
    <el-table-column
            prop="branch.branchname"
            label="店名"
            width="180">
    </el-table-column>
    <el-table-column
            prop="dates"
            label="审核时间"
            width="220">
    </el-table-column>
    <el-table-column
            prop="remark"
            label="驳回理由"
            width="180">
    </el-table-column>
    <el-table-column
            label="操作"
            width="180">
        <template slot-scope="scope">
            <el-button
                    @click.native.prevent="upRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                <el-tag
                        key="详细操作"
                        type='success'
                        effect="dark">
                    详细操作
                </el-tag>
            </el-button>
        </template>
    </el-table-column>
</el-table>

    <!--分页组件：
              @size-change:触发 改变每页显示的记录条数
              @current-change: 改变页码时触发的函数
              current-page: 显示的当前页面
              page-sizes: 页面大小的下拉框
              page-size: 默认每页显示的条数
              total: 总条数
         -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>



<%--    添加商品弹出层--%>
    <el-dialog
            title="信息"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
        <el-button type="success" @click="addUp">添加</el-button>
    <el-table
            stripe
            ref="multipleTable"
            :data="addTableData"
            tooltip-effect="dark"
            style="width: 100%"
            :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'15px'}"
            @selection-change="addHandleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                prop="url"
                label="商品图片"
        >
            <template slot-scope="scope">
                <img :src="scope.row.url" alt="" width="150" height="45">
            </template>
        </el-table-column>
        <el-table-column
                prop="goodsname"
                label="商品名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="layout"
                label="键盘布局"
                width="120">
        </el-table-column>
        <el-table-column
                prop="keycapname"
                label="键帽材质"
                width="120">
        </el-table-column>
        <el-table-column
                prop="keyboardcolorname"
                label="键盘颜色"
                width="120">
        </el-table-column>
        <el-table-column
                prop="shafttype"
                label="轴体类型"
                width="120">
        </el-table-column>
        <el-table-column
                prop="shaftchoose"
                label="轴体选择"
                width="120">
        </el-table-column>
        <el-table-column
                prop="interfacetype"
                label="接口类型"
                width="120">
        </el-table-column>
        <el-table-column
                prop="backlightcolorname"
                label="背光颜色"
                width="120">
        </el-table-column>
        <el-table-column
                prop="cprice"
                label="商品进阶"
                width="120">
        </el-table-column>
        <el-table-column
                prop="sprice"
                label="商品售价"
                width="120">
        </el-table-column>
    </el-table>

        <!--分页组件：
          @size-change:触发 改变每页显示的记录条数
          @current-change: 改变页码时触发的函数
          current-page: 显示的当前页面
          page-sizes: 页面大小的下拉框
          page-size: 默认每页显示的条数
          total: 总条数
     -->
        <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="currentPage1"
                :page-sizes="pagesizes"
                :page-size="pageSize1"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total1">
        </el-pagination>
    </el-dialog>



    <%--    新增入库弹出层--%>
    <el-dialog
            title="信息"
            :visible.sync="dialogVisible2"
            width="80%"
            :before-close="handleClose">
        <el-button type="success" @click="addUp2">添加</el-button>
        <el-table

                ref="multipleTable3"
                :data="newAddData"
                tooltip-effect="dark"
                style="width: 100%"
                :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'15px'}"
                @selection-change="addHandleSelectionChange2">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="goodsname"
                    label="商品名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="layout"
                    label="类型名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="shafttype"
                    label="键轴"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="interfacetype"
                    label="接口"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="cprice"
                    label="进价"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="店名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="counts"
                    label="库存"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="入库量"
                    width="150">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.num" type="text"/>
                </template>
            </el-table-column>
        </el-table>

        <!--分页组件：
          @size-change:触发 改变每页显示的记录条数
          @current-change: 改变页码时触发的函数
          current-page: 显示的当前页面
          page-sizes: 页面大小的下拉框
          page-size: 默认每页显示的条数
          total: 总条数
     -->
        <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="currentPage2"
                :page-sizes="pagesizes2"
                :page-size="pageSize2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2">
        </el-pagination>
    </el-dialog>

<%--    详细信息弹出层--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible4"
            width="70%"
            :before-close="handleClose1">
        <el-table
                :data="tableData4"
                border
                style="width: 100%">
            <el-table-column
                    prop="iid"
                    label="入库编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="goodsid"
                    label="商品id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="goodsname"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="入库数量">
            </el-table-column>
            <el-table-column
                    prop="cprice"
                    label="进价">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="所属分店">
            </el-table-column>
            <el-table-column
                    prop="allprice"
                    label="总价">
            </el-table-column>
        </el-table>

    </el-dialog>




</div>

<script>
    let app = new Vue({
        el:"#app",
        data:{
            input:'',
            //入库信息主表的内容
            tableData:[],
            //勾选的数据
            multipleSelection:[],
            //入库信息表头输入框
            branchSearchForm:{},
            //店铺数据
            branchSearch:[],
            //当前页面
            currentPage:1,
            //页面大小
             pageSize:5,
            //总条数
             total:0,
            //添加商品弹出层数据
            addTableData:[],
            //添加商品弹出层勾选的数据
            multipleSelection2:[],
            //添加商品弹出层隐藏
            dialogVisible:false,

            //添加弹出层分页
            //当前页面
            currentPage1:1,
            //页面大小
            pageSize1:5,
            //总条数
            total1:0,
            pagesizes:[1,2,5,10,100],

            //新增入库弹出层
            //新增入库弹出层勾选的数据
            multipleTable3:[],
            multipleSelection3:[],
            //新增入库弹出层隐藏
            dialogVisible2:false,
            //新增入库数据
            newAddData:[],
            //当前页面
            currentPage2:1,
            //页面大小
            pageSize2:5,
            //总条数
            total2:0,
            pagesizes2:[1,2,5,10,100],

            dialogVisible4:false,
            tableData4:[]

        },
        created(){
            //  初始化商品表格
            this.init();
            this.headselect();


        },
        methods: {
            //初始化
            init() {
                axios.post("/Inlibrary/info?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.branchSearchForm).then(function (resp) {
                    app.tableData = resp.data.data.list;
                    app.total=resp.data.data.total;
                })
            },
            //表头店铺选择下拉框
            headselect(){
                axios.get("/brand/info").then(function (resp){
                    app.branchSearch=resp.data.data

                })
            },
            //选择的数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //添加商品弹出层选择的数据
            addHandleSelectionChange(val) {
                this.multipleSelection2 = val;
            },
            //详细操作的按钮
            upRow(index, tableData){
                this.dialogVisible4=true;
                axios.get("/Bg/selectAll?id="+tableData[index].id).then(function (resp){
                    app.tableData4=resp.data.data
                })
            },
            newGoods(){
                this.init()
            },
            //改变页面数据数量
            handleSizeChange(val){
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.init();
            },
            //改变当前 页面的函数
            handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.init();
            },
            //表头查询按钮
            branchup(){
                this.init();
                console.log("2222",app.branchSearchForm)
            },
            //添加商品按钮
            addGoods(){
                app.dialogVisible=true;
                axios.post("/goods/BranchList?currentPage="+this.currentPage1+"&pageSize="+this.pageSize1).then(function (resp){
                    app.addTableData=resp.data.data.list
                    app.total1=resp.data.data.total
                })

            },
            //添加确认
            addUp(){
                if(app.multipleSelection2.length==0){
                    return app.$message("数据为空");
                }

                    this.$confirm('此操作将添加该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("/Bg/info",this.multipleSelection2).then(function (resp){
                            if(resp.data.data!=null){
                                app.$message({
                                    type: 'success',
                                    message: '添加商品成功!'
                                });
                            }else {
                                app.$message({
                                    type: 'info',
                                    message: '已存在该商品!'
                                });
                            }
                        })
                        app.init();
                        app.dialogVisible=false;

                    }).catch(() => {


                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                        app.dialogVisible=false;
                    });
            },

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                        app.$message('已取消');
                    })
                    .catch(_ => {});
            },
            handleClose1(done) {
                        done();
            },



            //添加商品分页设置
            //改变页面数据数量
            handleSizeChange1(val){
                console.log(`每页 ${val} 条`);
                this.pageSize1=val;
                this.addGoods();
            },
            //改变当前 页面的函数
            handleCurrentChange1(val){
                console.log(`弹出层当前页: ${val}`);
                console.log("11111"+val)
                this.currentPage1=val;
                this.addGoods();
            },





            //新增入库弹出层
            newAdd(){
                this.dialogVisible2=true;
                axios.post("/Bg/addGoods?currentPage="+this.currentPage2+"&pageSize="+this.pageSize2).then(function (resp){
                    app.newAddData=resp.data.data.list;
                    app.total2=resp.data.data.total
                })

            },
            //改变页面数据数量
            handleSizeChange2(val){
                console.log(`每页 ${val} 条`);
                this.pageSize2=val;
                this.newAdd();
            },
            //改变当前 页面的函数
            handleCurrentChange2(val){
                console.log(`当前页: ${val}`);
                this.currentPage2=val;
                this.newAdd();
            },
            //添加入库弹出层选择的数据
            addHandleSelectionChange2(val) {
                this.multipleSelection3 = val;
            },
            //新增入库添加按钮
            addUp2(){
                if(app.multipleSelection3.length==0){
                    return app.$message("数据为空");
                }
                for (var list of app.multipleSelection3){
                    if(list.num==0 || !list.num){
                        return  app.$message("数据为空");
                    }
                    if(!/^[1-9]\d*$/.test(list.num)){
                        return app.$message("数据不正确");
                    }
                }
                this.dialogVisible2=false;
                axios.post("/Bg/addGoodsUp",this.multipleSelection3).then(function (resp){
                    app.$message({
                        type: 'success',
                        message: '添加商品成功!'
                    });

                });
                this.init()


            },

            // 改变某一列单元格背景颜色
            tableCellStyle({ row, column, rowIndex, columnIndex }) {
                let rowBackground = {};

                if (row.taskColor) {
                    if (columnIndex === 2) {
                        rowBackground.background = row.taskColor;
                    } else {
                        rowBackground.background = "#f8f8f8";
                    }
                } else {
                    rowBackground.background = "#ffffff";
                }
                return rowBackground;
            },



        }
    })
</script>

</body>
</html>
